<template>
<van-row>
  <van-col span="24">
    <van-row>
      <van-col span="24" v-html="log" style="min-height:300px;height:80%;overflow-y:scroll;">
        <!-- <van-field type="textarea"></van-field> -->

      </van-col>
      <hr>
      <van-col span="24">
        <van-field label="我是:" v-model="who" placeholder="昵称"></van-field>
      </van-col>
      <van-col span="20">
        <van-field v-model="text" type="textarea"></van-field>
      </van-col>
      <van-col span="4">
        <van-button size="large" type="info" @click="send">发送</van-button>
        <!-- <van-button type="danger">危险按钮</van-button> -->
      </van-col>
    </van-row>
  </van-col>
</van-row>
</template>
<script lang="ts">
import Vue from 'vue'
import ReqApi,{ WSClient } from './api/req';
import Component from 'vue-class-component'
@Component({})
export default class App extends Vue {
  public log: string = '';
  public text: string="";
  public who:string ="";
  async send(){
    ReqApi.send(this.who,this.text);
    this.text="";
  }
  async mounted() { 
    WSClient.subscribe('l',(data,rpc)=>{
      // debugger
      this.log += `<span>${data.data.f} 说: ${data.data.x}</span><br/>`;

      console.log(data);
    })
  }
}
</script>

<style lang="less">
</style>
